import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col} from 'antd';
const Search = Input.Search;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
const TabPane = Tabs.TabPane;
import api from '../api';

//账户基本信息
import AccountInfo from './account/AccountInfo';
//投资记录
import InvestRecord from './account/InvestRecord';
//筹款记录
import RaiseRecord from './account/RaiseRecord';
//资金流水
import FundsRecord from './account/FundsRecord';
//短信记录
import SmsRecord from './account/SmsRecord';



export default class Account extends React.Component {
    constructor(props, context){
        super(props, context);
        let {id,curType='account'} = props.location.query||{};
        this.state={
          id,
          user:{},
          loading:true,
          curType
        };
    }

    componentWillMount(){
      let {id} = this.state;
      if(id){
        this.fetchUser(id);
      }
        
    }

    componentWillReceiveProps(nextProps){
        
    }

    //获取用户信息
    async fetchUser(id){
      let result = await api('/user/find/user',{id});
      if(result.cd!=0){
        message.error(result.msg)
        return;
      }
      this.setState({
        user:result.data||{}
      })
    }

    //tab切换
    handleTab = (value) => {
      this.setState({
        curType:value
      })
    }

   
   

   
    render() {
      let {id,user ,account,investRecord,raiseRecord,fundsRecord,smsRecord,loading,curType} = this.state;
        return (
            <div >
                <NavBar navs={[
                    {title:'用户管理',href:'/user/list'},
                    {title:'账户信息'}
                  ]} />
                <ContentBody className='container'>
                  <div className='search-panel'>
                      <Row gutter={16}>
                        <Col span={8}>
                          <label>用户编号:</label>
                          <span className='marginL10'>{user.id}</span>
                        </Col>
                        <Col span={8}>
                          <label>用户昵称:</label>
                          <span className='marginL10'>{user.nickname||'--'}</span>
                        </Col>
                        <Col span={8}>
                          <label>手机号:</label>
                          <span className='marginL10'>{user.phone||'--'}</span>
                        </Col>
                      </Row>
                  </div>
                  <Tabs defaultActiveKey={curType} onTabClick={this.handleTab.bind(this)}>
                    <TabPane tab="账户基本信息" key="account">
                      <AccountInfo 
                        id={id}
                        tabType='account'
                        curType={curType}
                      />
                    </TabPane>
                    <TabPane tab="投资记录" key="invest">
                      <InvestRecord 
                        id={id}
                        tabType='invest'
                        curType={curType}
                      />
                    </TabPane>
                    <TabPane tab="筹款记录" key="raise">
                      <RaiseRecord 
                        id={id}
                        tabType='raise'
                        curType={curType}
                      />
                    </TabPane>
                    <TabPane tab="资金流水" key="funds">
                      <FundsRecord 
                        id={id}
                        tabType='funds'
                        curType={curType}
                      />
                    </TabPane>
                    <TabPane tab="短信记录" key="sms">
                      <SmsRecord 
                        id={id}
                        tabType='sms'
                        curType={curType}
                        userData={user}
                      />
                    </TabPane>
                  </Tabs>
                </ContentBody>
                  
            </div>
        );
    }

    
}

Account.contextTypes= { router: React.PropTypes.object.isRequired};

